<!-- Dom模板 -->
<template>
  <div class="Home">
    <div class="back" ref="back">
      <!-- <div class="Home_top">
        <div class="Home_top_1">12:00</div>
        <div class="Home_top_2"></div>
        <div class="Home_top_3">图标</div>
      </div>-->
      <p class="Home_title">"团餐"膳食饮食</p>
      <div class="Home_Positioning"  @click="shequ()">
        <p><i class="iconfont icon-dizhi-01"></i>嘉宾花社区 &nbsp;＞</p>
        <span>
          <i class="icon iconfont icon-fangdajing"></i>
        </span>
      </div>
      <!-- 轮播图 -->
      <slideshow @swiper="swiper()"></slideshow>
    </div>
    <!-- 二级路由 -->
    <div class="Home_order">
      <div class="Home_order_list">
        <div class="aa" @click="dianji('chushi')">
          <img src="../../../../static/img2/1.png" alt="" />
        </div>
        <p>金牌厨师</p>
      </div>
      <div class="Home_order_list">
        <div class="bb" @click="dianji('bancheng')">
          <img src="../../../../static/img2/2.png" alt="" />
        </div>
        <p>半成品菜</p>
      </div>
      <div class="Home_order_list">
        <div class="cc" @click="dianji('shuiguo')">
          <img src="../../../../static/img2/3.png" alt="" />
        </div>
        <p>生鲜水果</p>
      </div>
      <div class="Home_order_list">
        <div class="dd" @click="dianji('peican')">
          <img src="../../../../static/img2/4.png" alt="" />
        </div>
        <p>活动配置</p>
      </div>
    </div>
    <!--小喇叭广告 -->
    <div class="Home_Advertising">
      <i class="iconfont icon-42"></i>
      <Home_Advertising></Home_Advertising>
    </div>
    <!-- 选项 -->
    <div class="Home_dataList">
      <div
        class="Home_xuan"
        v-for="(item, index) in dataList"
        :key="index"
        @click="active(index)"
      >
        {{ item }}
        <span :class="nowindex === index ? 'active' : ''"></span>
      </div>
      <div
        class="Home_tranction"
        v-for="item in this.nowindex === 0 ? this.List : rightList"
        :key="item.Id"
        v-show="Vif"
      >
        <div class="Home_left">
          <div class="img" @click="dianji('tuancan')">
            <img :src="item.Shop_avatar" alt="" />
          </div>
          <div class="Home_li">
            <p class="Home_redd">
              <b>￥ {{ item.Order_number }}</b>
            </p>
            <p class="Home_hui">
              市场价：
              <span class="Home_shan">￥ 30</span>
            </p>
          </div>
        </div>
        <div class="Home_right">
          <div class="right_title">
            <div>
              <h3>{{ item.Name }}</h3>
              <span class="gengduo">
                <i class="iconfont icon-share"></i>
              </span>
              <span class="lei">团餐</span>
            </div>
            <div>
              <span class="hui">共服务{{ item.Number_of_services }}次</span>
              <span class="btn">企业团购</span>
            </div>
            <div>
              <span class="blue">起订份{{ item.Order_number }}份</span>
            </div>
            <div>
              <span class="quan">{{ item.Order_number }}钟服务套餐</span>
              <span class="juli">1.2km</span>
            </div>
          </div>
          <div class="right_li">
            <p class="right_redd">水煮肉片+炒豆角+慢支豆腐+酸辣土豆丝</p>
            <p class="right_hui">主食:馒头/米饭</p>
          </div>
        </div>
      </div>
    </div>

    <TUANCAN v-if="flagn" @tuantuis="tuantuia" />
    <router-view />
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import slideshow from "../../../components/slideshow.vue";
import Home_Advertising from "../../../components/Swiper_Advertising.vue";
import TUANCAN from "./view2/tuancan/index.vue";
import axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      msg: "测试",
      dataList: ["精美团餐", "特色早餐", "减肥降压", "其他标签", "其他团餐"],
      nowindex: 0,
      time: "",
      flagn: false,
      rightList: [],
      List: [],
      Vif: false,
    };
  },
  components: {
    slideshow,
    Home_Advertising,
    TUANCAN,
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    axios.post("/api/get_shpos").then((res) => {
      this.List = res.data;
      console.log(res.data);
    });
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // console.log(this.$store.state.list2);
    this.Vif = true;
  },
  // Vue方法定义
  methods: {
    active(index) {
      this.nowindex = index;
      this.Vif = false;
      this.rightList = this.List.filter((item) => {
        if (item.Ids == this.nowindex) {
          return item.Ids == this.nowindex;
        } else if (this.nowindex === 0) {
          return this.List;
        }
      });
      setTimeout(() => {
        this.Vif = true;
      }, 200);
    },
    swiper() {
      this.$refs.back.style.background = `rgb(${Math.floor(
        Math.random() * 230
      )}, ${Math.floor(Math.random() * 200)}, ${Math.floor(
        Math.random() * 150
      )})`;
    },
    dianji(e) {
      if (e === "bancheng") {
        this.$router.push("/dishes");
      } else if (e === "shuiguo") {
        this.$router.push("/fruit");
      } else if (e === "peican") {
        this.$router.push("/catering");
      } else if (e === "tuancan") {
        this.flagn = true;
      } else if (e === "chushi") {
        this.$router.push("/GoldChef");
      }
    },
    shequ(){
     this.$router.push('/shequ')
   },
    fanhuia() {
      this.flag = false;
    },
    fantuia() {
      this.flags = false;
    },
    tuantuia() {
      this.flagn = false;
    },
    Cook() {
      this.flagy = false;
    },
    fantuias() {
      this.flaga = false;
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.aa {
  background: rgb(249, 204, 204);
}
.bb {
  background: rgb(173, 231, 220);
}
.cc {
  background: rgb(204, 236, 249);
}
.dd {
  background: rgb(248, 222, 185);
}
.Home {
  width: 100vw;
  height: calc(100vh - 51px);
  overflow: auto;
}
.Home_top {
  text-align: center;
  width: 100%;
  height: 40px;
}
.Home_top div {
  float: left;
  line-height: 40px;
}
.Home_top_1 {
  width: 25%;
}
.Home_top_2 {
  width: 50%;
  height: 100%;
  border-radius: 0 0 28px 28px;
  background: black;
}
.Home_top_3 {
  width: 25%;
}
.Home_title {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: white;
}
.back {
  background: rgb(255, 180, 122);
}
.Home_Positioning {
  width: 100%;
  height: 20px;
  color: white;
  line-height: 20px;
  margin-bottom: 10px;
}
.Home_Positioning p {
  float: left;
}
.Home_Positioning span {
  float: right;
}
.Home_Positioning i {
  font-size: 25px;
  margin-left: 10px;
  margin-right: 10px;
}
.Home_order {
  width: 100%;
  height: 100px;
  margin-top: 20px;
}
.Home_order_list {
  width: 25%;
  height: 100%;
  float: left;
  text-align: center;
}
.Home_order_list > div {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  margin-left: 20%;
  margin-bottom: 10px;
}
.Home_order_list img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.Home_Advertising {
  width: 90%;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  background: rgba(253, 249, 243);
  margin-top: 3%;
  margin-left: 5%;
  overflow: auto;
}
.Home_Advertising i {
  margin-left: 15px;
  font-size: 25px;
  color: rgb(255, 165, 0);
  float: left;
  margin-right: 10px;
}
.Home_dataList {
  width: 100%;
  height: 30px;
  margin-top: 20px;
}
.Home_xuan {
  float: left;
  width: 20%;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.active {
  width: 60px;
  display: block;
  background: rgb(255, 165, 0);
  height: 7px;
  border-radius: 50px 50px 0 0;
  margin-top: -13px;
  margin-left: 10px;
}
.Home_shai {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
  float: left;
}
.Home_shai > div {
  float: left;
  width: 20%;
  height: 30px;
  margin-left: 3px;
  text-align: center;
  font-size: 13px;
}
.Home_tranction {
  width: 100vw;
  height: 200px;
  float: left;
}
.Home_left {
  width: 35%;
  height: 100%;
  float: left;
}
.Home_left .img {
  width: 130px;
  height: 130px;
  margin-left: 8px;
  margin-top: 8px;
}
.Home_left img {
  width: 130px;
  height: 130px;
}
.Home_li {
  width: 100%;
  height: 30px;
  font-size: 13px;
  margin-top: 10px;
}
.Home_li p {
  margin-left: 10px;
}
.Home_shan {
  text-decoration: line-through;
}
.Home_redd {
  animation-duration: 1s;
  animation-name: animateLeft;
}
.Home_hui {
  color: #ccc;
  animation-duration: 1.9s;
  animation-name: animateLeft;
}
.img {
  animation-duration: 1.5s;
  animation-name: animateLeft;
}
@keyframes animateLeft {
  0% {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
  }
}
.Home_right {
  width: 63%;
  height: 100%;
  float: right;
}
.right_title {
  margin-top: 8px;
  width: 100%;
  height: 130px;
}
.right_redd {
  font-size: 13px;
  float: right;
  margin-right: 20px;
  animation-duration: 1.9s;
  animation-name: animateright;
}
.right_hui {
  font-size: 13px;
  float: right;
  color: #ccc;
  margin-top: 5px;
  margin-right: 20px;
  animation-duration: 1.5s;
  animation-name: animateright;
}
@keyframes animateright {
  0% {
    opacity: 0;
    transform: translate3d(500px, 0, 0);
  }
}
.right_li {
  width: 100%;
  height: 30px;
  font-size: 13px;
  margin-top: 10px;
}
.right_title h3 {
  margin: 5px 0 5px 0;
  float: left;
  animation-duration: 1.1s;
  animation-name: animateright;
}
.right_title > div {
  width: 100%;
  height: 30px;
  float: left;
}
.hui {
  width: 120px;
  color: #ccc;
  font-size: 13px;
  display: block;
  margin-top: 8px;
  float: left;
  margin-bottom: 7px;
  animation-duration: 1.2s;
  animation-name: animateright;
}
.blue {
  font-size: 13px;
  float: left;
  display: block;
  animation-duration: 1.3s;
  animation-name: animateright;
  color: rgb(92, 190, 250);
}
.quan {
  float: left;
  display: block;
  width: 120px;
  margin-top: 5px;
  text-align: center;
  border: 1px solid rgb(255, 165, 0);
  border-radius: 50px;
  font-size: 14px;
  animation-duration: 1.1s;
  animation-name: animateright;
  color: rgb(255, 165, 0);
}
.lei {
  width: 40px;
  display: block;
  float: right;
  color: rgb(255, 118, 59);
  text-align: center;
  font-size: 13px;
  margin-top: 10px;
  margin-right: 10px;
  animation-duration: 0.5s;
  animation-name: animateright;
  background: rgb(255, 232, 222);
}
.juli {
  display: block;
  width: 50px;
  float: right;
  margin-top: 5px;
  font-size: 13px;
  margin-right: 13px;
  animation-duration: 1.5s;
  animation-name: animateright;
}

.right_title .gengduo {
  width: 40px;
  display: block;
  float: right !important;
  font-size: 13px;
  margin-top: 10px;
  margin-right: px;
  animation-duration: 1.5s;
  animation-name: animateright;
}
.btn {
  width: 65px;
  font-size: 14px;
  height: 30px;
  border-radius: 50px;
  color: white;
  font-size: 13px;
  padding: 5px;
  float: right;
  margin-top: 20px;
  margin-right: 20px;
  animation-duration: 1.5s;
  animation-name: animateright;
  background: rgb(46, 173, 249);
}
</style>